<!--
 * @Description: 自定义Tabbar组件
-->
<template>
  <view class="custom-tabbar">
    <view 
      v-for="(item, index) in tabItems" 
      :key="index" 
      class="tab-item" 
      :class="{ active: currentTab === index }"
      @click="switchTab(index)"
    >
        <image 
          class="tab-icon" 
          :src="currentTab === index ? item.activeIcon : item.inactiveIcon"
        ></image>
      <view class="tab-text" v-if="showText">{{ item.name }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabbar',
  props: {
    // 当前选中的tab索引
    current: {
      type: Number,
      default: 0
    },
    // 是否显示文字
    showText: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentTab: this.current,
      tabItems: [
        {
          name: '首页',
          path: '/pages/index/index',
          activeIcon: '/static/tabbar/s_act.png',
          inactiveIcon: '/static/tabbar/s.png'
        },
        {
          name: '商城',
          path: '/pages/mall/mall',
          activeIcon: '/static/tabbar/sc_a.png',
          inactiveIcon: '/static/tabbar/sc.png'
        },
        {
          name: '盒柜',
          path: '/pages/box/box',
          activeIcon: '/static/tabbar/hg_a.png',
          inactiveIcon: '/static/tabbar/hg.png'
        },
        {
          name: '我的',
          path: '/pages/mine/mine',
          activeIcon: '/static/tabbar/m_a.png',
          inactiveIcon: '/static/tabbar/m.png'
        }
      ]
    }
  },
  watch: {
    current: {
      immediate: true,
      handler(val) {
        // 确保当前索引更新
        this.currentTab = val;
      }
    }
  },
  methods: {
    switchTab(index) {
      // 先更新选中的tab
      this.currentTab = index;
      this.$emit('change', index);
      
      // 获取目标路径
      const targetPath = this.tabItems[index].path;
      console.log('尝试切换到页面:', targetPath);
      
      // 简化导航逻辑，直接使用 reLaunch 确保页面切换后状态一致
      uni.reLaunch({
        url: targetPath,
        success: () => {
          console.log('页面切换成功');
          // 强制再次更新当前tab，确保在导航完成后状态正确
          setTimeout(() => {
            this.currentTab = index;
          }, 100);
        },
        fail: (err) => {
          console.error('页面切换失败:', err);
        }
      });
    }
  }
}
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 40rpx;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 999;
  background: linear-gradient( 180deg, rgba(240,220,176,0) 0%, #F0DCB0 100%);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease;
}

.tab-item.active {
  transform: scale(1.05);
}

.tab-icon-container {
  width: 160rpx;
  height: 165rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.tab-icon {
  width: 174rpx;
  height: 174rpx;
  transition: all 0.3s ease;
  opacity: 0.8;
}

.tab-item.active .tab-icon {
  opacity: 1;
}

.tab-text {
  font-size: 20rpx;
  color: #999;
  margin-top: 8rpx;
  transition: all 0.3s ease;
}

.tab-item.active .tab-text {
  color: #333;
  transform: scale(1.1);
}
</style> 